<template>
	<view class="tm-flop vertical-align-middle d-inline-block overflow">
		<tm-translate :animationName="animationName" :duration="duration" ref="dh" @start="test(true)"
			@end="test(false)"><slot name="default" :num="n">{{n}}</slot></tm-translate>

	</view>
</template>


<script>
	/**
	 * 数字翻牌
	 * @property {Number} num = [] 50,需要展示的数字
	 * @property {Number} duration = [] 100,翻牌的间隔，单位ms
	 * @property {Number} numberTimes = [] 10,翻牌的次数
	 * @property {Number} animationName = [fadeUp|fadeDown|fadeLeft|fadeRight|zoomIn|zoomOut|fadeIn|fadeOut] fadeUp,翻牌的动效
	 */
	import tmTranslate from "@/tm-vuetify/components/tm-translate/tm-translate.vue"
	export default {
		name: "tm-flop",
		components: {
			tmTranslate
		},
		props: {
			num: {
				type: Number | String,
				default: 0,
			},
			duration: {
				type: Number | String,
				default: 100,
			},
			numberTimes: {
				type: Number,
				default: 10,
			},
			animationName: {
				type: String,
				default: "fadeUp"
			},
			
		},
		data() {
			return {
				n: 0
			}
		},
		watch: {
			num: function() {
				this.n = 0;
				this.$nextTick(function() {
					this.$refs.dh.play()
				})
			},
		},
		computed: {
			num_d: function() {
				return parseFloat(this.num)
			},
			cishu: function() {
				return Math.floor(this.num_d / this.numberTimes)
			}
		},
		methods: {
			replay() {
				this.n = 0;
				this.$nextTick(function() {
					this.$refs.dh.play()
				})
			},
			test(type) {

				this.$nextTick(function() {
					if (type == false) {
						if (this.n >= this.num_d) {
							this.n = this.num_d
							return;
						}
						this.$refs.dh.play()
					} else {
						if (this.n < this.num_d) this.n += this.cishu
					}
				})
			}
		},
	}
</script>

<style>
</style>
